import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Input,
  Button,
  InputNumber,
  Radio,
  Modal,
} from 'antd';
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const FormItem = Form.Item;

@connect(({ configure, loading }) => ({
  configure,
  loading: loading.models.configure,
}))
@Form.create()
class Configure extends PureComponent {
  state = {
    riskModelCode: '',
    riskValue: '',
    packagesNum: false,
    usermodelMessage:false,
    filemodelMessage:false,
  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.update(values)
      }
    });
  };

  // 提交
  update(e) {
    const { dispatch } = this.props;
    const { riskModelCode } = this.state;
    const values = {
      riskModel: e.riskModel,
      riskModelCode,
      packagesNum: e.riskModel=='30'?e.packagesNum:null,
      usermodelMessage: e.riskModel=='10'?e.modelMessageUser:null,
      filemodelMessage: e.riskModel=='10'?e.filemodelMessage:null,
    }
    dispatch({
      type: 'configure/update',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({title: res.msg});
          this.pageList();
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });
  }

  componentDidMount() {
    // 页面初始化
    this.pageList()
  }
  
  pageList() {
    const { dispatch } = this.props;
    const values = {
      dataType: 'RISKMODEL',
    };
    dispatch({
      type: 'configure/query',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          this.whichCheck(res.data[0])
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });
    
  }

    // 默认选中方法
  whichCheck(data=[]) {
    let value = ''
    data&&data.length&&data.map((v) => {
      if(v.status == 0){
        this.setState({
          riskValue: v.dataDictValue,
          riskModelCode: v.dataDictCode,
          packagesNum: (v.dataDictCode=='COMPOSEMODEL'&&v.status==0)?true:false,
          usermodelMessage: (v.dataDictCode=='USERMODEL'&&v.status==0)?true:false,
          filemodelMessage: (v.dataDictCode=='FILEMODEL'&&v.status==0)?true:false,
        })
      }
    })
  }
  onChange(e) {
    this.setState({
      riskModelCode: e.target.dataDictCode,
    })

    if(e.target.dataDictCode == 'COMPOSEMODEL'){
      this.setState({
        packagesNum: true,
      })
    }else{
      this.setState({
        packagesNum: false,
      })
    }

    if(e.target.dataDictCode == 'USERMODEL'){
      this.setState({
        usermodelMessage: true,
      })
    }else{
      this.setState({
        usermodelMessage: false,
      })
    }

    if(e.target.dataDictCode == 'FILEMODEL'){
      this.setState({
        filemodelMessage: true,
      })
    }else{
      this.setState({
        filemodelMessage: false,
      })
    }
  }

  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
      configure: {data}
    } = this.props;
    const { riskValue, packagesNum,filemodelMessage,usermodelMessage } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
        md: { span: 17 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const dataList = data[0];
    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>        
          <FormItem {...formItemLayout} label='风险模式'>
            {getFieldDecorator('riskModel',{initialValue: riskValue})(
              <RadioGroup onChange={this.onChange.bind(this)}>
                {dataList&&dataList.length?dataList.map((v) => {
                  return (<Radio key={v.dataDictValue} value={v.dataDictValue} {...v}>{v.dataDictName}</Radio>)
                }):null}
              </RadioGroup>
            )}
            <span style={{display:usermodelMessage?'block':'none'}}>根据用户分级数自动创建相同数量的策略包</span>
            <span style={{display:filemodelMessage?'block':'none'}}>根据文件敏感等级自动创建相同数量的策略包</span>
            <span style={{display:packagesNum?'block':'none'}}>将用户分级值和文件敏感等级值分别相乘所得的风险值从大到小平均分配到策略包中。</span>
          </FormItem>

          <FormItem {...formItemLayout} label='策略包数量' style={{display:packagesNum?'block':'none'}}>
            {getFieldDecorator('packagesNum',{initialValue: data&&data[1]||0})(
              <InputNumber placeholder="0-10" max={10} min={0} style={{ width: '270px' }}/>
            )}            
          </FormItem>

          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" htmlType="submit" onSubmit={this.handleSubmit}>
              提交
            </Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}

export default Configure;
